<template>
  <div class="personalCenter-container">
    <!-- 标题 -->
    <module-title :title="moduleTitle"></module-title>

    <!-- 查询 start -->
    <el-card
      :body-style="{ padding: '20px 30px' }"
      :style="{ position: 'relative' }"
    >
      <div slot="header" class="clearfix">
        <span>查询条件</span>
      </div>
      <el-form
        ref="backForm"
        :inline="true"
        :model="oemFindQueryForm"
        class="demo-form-inline"
      >
        <el-form-item label="贴牌商名称" prop="nameKeyword">
          <el-input
            v-model="oemFindQueryForm.nameKeyword"
            placeholder="贴牌商名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="贴牌状态" prop="enabled">
          <el-select
            v-model="oemFindQueryForm.enabled"
            clearable
            placeholder="请选择"
          >
            <el-option label="启用" :value="true"></el-option>
            <el-option label="禁用" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="checkTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            style="background-color: #1074fd;color: #ffffff;border: 0"
            icon="el-icon-search"
            @click="queryOemInfoSubmit()"
            >查询
          </el-button>
          <el-button plain style="color: #999999" @click="resetFrom('backForm')"
            >清空条件</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 查询 end -->

    <!-- 列表 start -->
    <el-card :body-style="{ padding: '20px 20px' }" style="margin-top: 20px;">
      <div class="oem_list">
        <div class="title_detail">
          贴牌商列表
          <el-button
            class="form_btn"
            style="background-color: #1074fd;color: #ffffff"
            size="medium"
            @click="addOemDialig = true"
          >
            新增
          </el-button>
        </div>
        <div class="panel-body">
          <div class="widget-list list-left-element">
            <ul class="list" style="height: 500px;position:relative;">
              <li v-if="!oem_list.length" class="list-nodata">
                <div class="title">暂无数据</div>
              </li>
              <li
                v-else
                v-for="(item, index) in oem_list"
                :key="item.id"
                style="position: relative;"
                :class="currentItemIndex === index ? 'current' : ''"
                @click="oemInfoClick(item, index)"
              >
                <div class="text">
                  <span class="title">{{ item.organName }}</span>
                  <div style="display: flex">
                    <span class="title1" style="color: rgb(66, 190, 255)">{{
                      item.usedNum
                    }}</span>
                    <span class="title1">{{
                      item.totalNum - item.usedNum
                    }}</span>
                  </div>
                </div>
                <div class="text" style="position: absolute; right: 5px;">
                  <span class="title">{{ item.totalNum }}</span>
                  <div style="display: flex;justify-content: flex-end">
                    <span
                      class="title1"
                      style="color: rgb(66, 190, 255)"
                      v-if="item.baned"
                      >启用</span
                    >
                    <span
                      class="title1"
                      style="color: #FF2F56"
                      v-else-if="!item.baned"
                      >禁用</span
                    >
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div style="position: absolute;bottom: 10px">
          <el-pagination
            :page-size="6"
            :pager-count="5"
            layout="total, prev, pager, next"
            :total="oemtotal"
            @prev-click="paginationPrevClick"
            @next-click="paginationNextClick"
            @current-change="paginationNextChange"
          ></el-pagination>
        </div>
      </div>
      <div class="oem_detail">
        <div class="title_detail">
          <div class="button_detail">
            贴牌商详情
          </div>
          <div v-if="isNull">
            <el-button
              style="background-color: #1074fd;color: #ffffff;border: 0"
              @click="openMessage('reset')"
              >重置密码
            </el-button>
            <el-button
              style="background-color: #1074fd;color: #ffffff;border: 0"
              @click="openMessage('authorize')"
            >
              添加授权
            </el-button>
            <el-button
              type="danger"
              @click="openMessage('ban')"
              v-if="oeminfo.enabled === '启用'"
              >{{ oeminfo.enabled === "启用" ? "禁用" : "启用" }}
            </el-button>
            <el-button type="success" @click="openMessage('ban')" v-else
              >{{ oeminfo.enabled === "启用" ? "禁用" : "启用" }}
            </el-button>
            <el-button
              style="background-color: #1074fd;color: #ffffff;border: 0"
              @click="openMessage('edit')"
              >编辑
            </el-button>
          </div>
        </div>
        <el-tabs
          v-model="activeName"
          :style="{ margin: '20px' }"
          @tab-click="tabChange"
          v-if="isoeminfo"
        >
          <el-tab-pane label="基础信息" name="userInfo">
            <div class="detail_mes">
              <div class="messages1">贴牌商编号：{{ oeminfo.code }}</div>
              <div class="messages">贴牌商账号：{{ oeminfo.userName }}</div>
              <div class="messages">贴牌商名称：{{ oeminfo.organName }}</div>
              <div class="messages">贴牌商状态：{{ oeminfo.enabled }}</div>
              <div class="messages">上级：{{ oeminfo.parentOrganName }}</div>
            </div>
            <div class="detail_mes">
              <div class="messages" v-if="oeminfo.isDs">电商总控数：{{ oeminfo.dsTotalNum }}</div>
              <div class="messages" v-if="oeminfo.isDs">电商已使用：{{ oeminfo.dsUsedNum }}</div>
              <div class="messages" v-if="oeminfo.isJs">计数器总控数：{{ oeminfo.jsTotalNum }}</div>
              <div class="messages" v-if="oeminfo.isJs">计数器已使用：{{ oeminfo.jsUsedNum }}</div>
            </div>
            <div>
              <div class="messages">联系电话：{{ oeminfo.connectorTel }}</div>
              <div class="messages">地址：{{ oeminfo.address }}</div>
              <div class="messages1">创建时间：{{ oeminfo.createTime }}</div>
              <div class="messages1">备注：{{ oeminfo.remark }}</div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="授权总数明细" name="authDetail">
            <div>
              <el-form
                :inline="true"
                :model="authDetailPage"
                class="demo-form-inline"
              >
                <div
                  style="display: flex;flex-direction: row;justify-content: space-between"
                >
                  <div>
                    <el-date-picker
                      v-model="checkTime"
                      type="daterange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-time="['00:00:00', '23:59:59']"
                    >
                    </el-date-picker>
                  </div>
                  <el-form-item>
                    <el-button
                      style="background-color: #1074fd;color: #ffffff;border: 0"
                      icon="el-icon-search"
                      @click="getAuthInfo"
                      >查询
                    </el-button>
                  </el-form-item>
                </div>
              </el-form>
              <el-table
                ref="RoutineTable"
                border
                :data="authDetail"
                tooltip-effect="dark"
                max-height="320px"
                style="font-size: 12px;"
              >
                <el-table-column prop="createTime" label="变更时间"
                  >s
                  <template slot-scope="scope">
                    <span>{{ formDate(scope.row.createTime) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="types" label="事项"></el-table-column>
                <el-table-column
                  prop="counts"
                  label="数量变动"
                ></el-table-column>
                <el-table-column prop="used" label="已使用"></el-table-column>
                <el-table-column
                  prop="total"
                  label="总授权数"
                ></el-table-column>
              </el-table>
            </div>
            <div class="table_bottom">
              <div class="table_pages">
                <el-pagination
                  :page-sizes="[10, 15, 20, 25, 30]"
                  :current-page="authDetailPage.pageNum"
                  :page-size="authDetailPage.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="authDetailtotal"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                ></el-pagination>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <!-- 列表 end -->

    <!-- 弹窗 -->
    <!-- 新增贴牌 -->
    <el-dialog width="50%" title="新增贴牌商" :visible.sync="addOemDialig">
      <el-form
        ref="addForm"
        :model="addOemFormCopy"
        :rules="addOemFormRules"
        size="mini"
        style="width:70%;margin: 0 auto "
      >
        <el-form-item label="贴牌商账号" label-width="120px" prop="userName">
          <el-input
            v-model="addOemFormCopy.userName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="初始密码" label-width="120px" prop="password">
          <el-input
            v-model="addOemFormCopy.password"
            type="password"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" label-width="120px" prop="password2">
          <el-input
            v-model="addOemFormCopy.password2"
            type="password"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="计数器授权总数" label-width="120px" >
          <el-input v-model="addOemFormCopy.jsInitTotal" autocomplete="off">
            <template #suffix>个</template>
          </el-input>
        </el-form-item>
        <el-form-item label="电商授权总数" label-width="120px">
          <el-input v-model="addOemFormCopy.dsInitTotal" autocomplete="off">
            <template #suffix>个</template>
          </el-input>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="贴牌商名称" label-width="120px" prop="organName">
          <el-input
            v-model="addOemFormCopy.organName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" label-width="120px" prop="connectorTel">
          <el-input
            v-model="addOemFormCopy.connectorTel"
            autocomplete="off"
            maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系地址" label-width="120px" prop="address">
          <el-input
            v-model="addOemFormCopy.address"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="120px" prop="remark">
          <el-input
            v-model="addOemFormCopy.remark"
            autocomplete="off"
            maxlength="30"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addOemDialig = false">取 消</el-button>
        <el-button type="primary" @click="addOemClick()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑贴牌 -->
    <el-dialog width="40%" title="编辑贴牌商" :visible.sync="editOemDialig">
      <el-form
        ref="editForm"
        :model="editOemForm"
        :rules="editOemFormRules"
        size="mini"
        style="width:70%;margin: 0 auto "
      >
        <el-form-item label="贴牌商账号" label-width="120px" prop="userName">
          <el-input
            v-model="oeminfo.userName"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="贴牌商名称" label-width="120px" prop="organName">
          <el-input
            v-model="editOemForm.organName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" label-width="120px" prop="connectorTel">
          <el-input
            v-model="editOemForm.connectorTel"
            autocomplete="off"
            maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系地址" label-width="120px" prop="address">
          <el-input v-model="editOemForm.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editOemDialig = false">取 消</el-button>
        <el-button type="primary" @click="oemUpload()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ModuleTitle from "@/components/content/ModuleTitle";

import { isNumber, isPassword, isPhone, isNumberBig } from "@/utils/validate";
import API from "@/network/api/omsApi";
import moment from "moment";
import { createSign } from "@/utils/sign";

export default {
  name: "index",
  data() {
    const validateUsername = async (rule, value, callback) => {
      if (value === "") {
        callback(new Error("该字段为必填项!"));
      } else {
        callback();
      }
    };
    const validatePassword2 = (rule, value, callback) => {
      // console.log(value)
      if (this.addOemFormCopy.password !== value) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      // console.log(rule, value)
      if (!isPassword(value)) {
        callback(new Error("密码不能少于6位"));
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (!isPhone(value)) {
        callback(new Error("请输入正确的手机号码格式"));
      } else {
        callback();
      }
    };
    const validateAuthTotal = (rule, value, callback) => {
      if (!isNumberBig(value)) {
        callback(new Error("请输入大于0的数"));
      } else {
        callback();
      }
    };
    const validateEmsCount = (rule, value, callback) => {
      if (!isNumberBig(value)) {
        callback(new Error("请输入大于0的数"));
      } else {
        callback();
      }
    };
    return {
      moduleTitle: "贴牌管理",
      // 请求头
      headers: {
        session_id: ""
      },
      isoeminfo: false,
      isNull: false,
      currentUserInfo: {}, // 当前选中贴牌信息
      currentItemIndex: 0, // 当前选中贴牌编号
      addOemDialig: false, // 新增弹窗
      editOemDialig: false, // 修改弹窗
      enabled: null,
      oeminfo: {},
      // 时间选择
      checkTime: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() + 8.64e6;
        }
      },
      // 编辑贴牌参数
      editOemForm: {
        operatorOrganId: 0, // 操作人员企业id
        organId: 0, // 企业id
        organName: "", // 企业名称
        connectorTel: "", // 联系人电话
        address: "" // 地址
      },
      // 编辑校验规则
      editOemFormRules: {
        address: [
          {
            required: true,
            trigger: "blur",
            message: "该字段为必填字段"
          }
        ],
        connectorTel: [
          {
            required: true,
            trigger: "blur",
            validator: validatePhone
          }
        ],
        organName: [
          {
            required: true,
            trigger: "blur",
            message: "该字段为必填字段"
          }
        ]
      },
      // 新增贴牌参数副本
      addOemFormCopy: {
        organName: "", // 贴牌名称
        connectorTel: "", // 联系电话
        address: "", // 联系地址
        jsInitTotal: "", // 初始化授权数
        dsInitTotal: "", // 初始化授权数
        userName: "", // 登陆贴牌账号
        remark: "", // 备注
        password: "", // 登陆密码
        password2: ""
        // domain: ""
      },
      // 新增贴牌参数
      addOemForm: {
        operatorOrganId: 0, // 操作人员企业id
        organName: "", // 贴牌名称
        connectorTel: "", // 联系电话
        address: "", // 联系地址
        level: "OMS", // 企业等级 贴牌OMS 代理PMS 企业EMS
        jsInitTotal: "", // 初始化授权数
        dsInitTotal: "", // 初始化授权数
        userName: "", // 登陆贴牌账号
        remark: "无", // 备注
        password: "", // 登陆密码
        // domain: "",
        dsExpires: 1,
        jsExpires: 1,
        isDs: true,
        isJs: true
      },
      // 新增校验规则
      addOemFormRules: {
        userName: [
          {
            required: true,
            trigger: "blur",
            validator: validateUsername
          }
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            validator: validatePassword
          }
        ],
        password2: [
          {
            required: true,
            trigger: "blur",
            validator: validatePassword2
          }
        ],
        connectorTel: [
          {
            required: true,
            trigger: "blur",
            validator: validatePhone
          }
        ],
        address: [
          {
            required: true,
            trigger: "blur",
            message: "该字段为必填字段"
          }
        ],
        organName: [
          {
            required: true,
            trigger: "blur",
            message: "该字段为必填字段"
          }
        ]
      },
      oem_list: [],
      oemtotal: 0,
      activeName: "userInfo",
      authDetail: [],
      authDetailtotal: 0,
      oemListPages: {
        pageNum: 1,
        pageSize: 6
      },
      oemFindQueryForm: {
        nameKeyword: "", // 机构名称关键字
        organCodeN: "", // 需要查询的机构的code
        enabled: "",
        createTimeQ: "",
        createTimeH: ""
      },
      // 查询参数
      listQueryForm: {
        organCode: "",
        type: "OMS" // OMS查询管理的贴牌，PMS查询管理的代理,EMS查询管理的企业
      },
      oemQueryDetail: {
        organId: 0 // 机构id
      },
      AgentNum: {
        telephone: "",
        addAgentNum: ""
      },
      requestParam: {
        organId: 0, // 操作的机构id
        currentOrganId: 0, // 当前机构的机构id
        enabled: ""
      },
      // 重置密码参数
      resPwdForm: {
        operatorOrganId: 0, // 操作人员企业id
        needReloadOrganId: 0 // 需要重置的企业id
      },
      // 添加授权数参数
      AddAgentNumParam: {
        fromOrganId: 0,
        toOrganId: 0,
        dsCount: 0,
        jsCount: 0,
        remark: "",
        dsTime: 1,
        jsTime: 1,
        isDs: true,
        isJs: true
      },
      // 授权详情页参数
      authDetailPage: {
        operatorOrganId: 0,
        remarkKeyword: "",
        createTimeQ: "",
        createTimeH: "",
        pageNum: 1,
        pageSize: 10
      },
      publicForm: {
        timestamp: ""
      }
    };
  },
  computed: {},
  watch: {
    "oeminfo.id"() {
      if (this.oeminfo.id) {
        this.authDetailPage.operatorOrganId = this.oeminfo.id;
      }
    },
    checkTime() {
      if (this.checkTime === null) {
        this.checkTime = [];
      }
      if (this.checkTime.length !== 0) {
        this.oemFindQueryForm.createTimeQ = Number(
          moment(this.checkTime[0].getTime()).format("x")
        );
        this.oemFindQueryForm.createTimeH = Number(
          moment(this.checkTime[1].getTime()).format("x")
        );
        this.authDetailPage.createTimeQ = Number(
          moment(this.checkTime[0].getTime()).format("x")
        );
        this.authDetailPage.createTimeH = Number(
          moment(this.checkTime[1].getTime()).format("x")
        );
      } else {
        this.oemFindQueryForm.createTimeQ = "";
        this.oemFindQueryForm.createTimeH = "";
        this.authDetailPage.createTimeQ = "";
        this.authDetailPage.createTimeH = "";
      }
    }
  },
  created() {
    this.currentUserInfo = JSON.parse(localStorage.getItem("updateUserInfo"));
    this.headers.session_id = this.currentUserInfo.token;
    this.getOem();
  },
  mounted() {},
  methods: {
    addOemClick() {
      this.saveOem();
    },

    formDate(createTime) {
      createTime = this.$moment(createTime).format("YYYY-MM-DD HH:mm:ss");
      return createTime;
    },

    // 编辑贴牌信息
    async oemUpload() {
      this.editOemForm.operatorOrganId = this.currentUserInfo.organId;
      this.editOemForm.organId = this.oeminfo.organId;
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({ ...this.editOemForm, ...this.publicForm })
      );
      await API.editOemForm({ ...this.editOemForm, ...this.publicForm }).then(
        res => {
          if (res.data.code === 0) {
            this.$message("编辑成功!", "success");
          } else {
            this.$message({
              type: "warning",
              message: res.data.msg
            });
          }
        }
      );
      this.getOem();
      this.editOemDialig = false;
    },

    // 添加贴牌商
    async saveOem() {
      var that = this;
      this.$refs.addForm.validate(async vali => {
        if (!vali) return;
        that.addOemForm.password = this.$md5(that.addOemFormCopy.password);
        that.addOemForm.operatorOrganId = that.currentUserInfo.organId;
        that.addOemForm.jsInitTotal = Number(that.addOemFormCopy.jsInitTotal);
        that.addOemForm.dsInitTotal = Number(that.addOemFormCopy.dsInitTotal);
        that.addOemForm.userName = that.addOemFormCopy.userName;
        that.addOemForm.remark = that.addOemFormCopy.remark;
        that.addOemForm.connectorTel = that.addOemFormCopy.connectorTel;
        that.addOemForm.organName = that.addOemFormCopy.organName;
        that.addOemForm.address = that.addOemFormCopy.address;
        that.publicForm.timestamp = new Date().getTime();
        if (that.publicForm.sign) {
          delete that.publicForm.sign;
        }
        delete that.addOemForm.password2;
        that.publicForm.sign = createSign(
          JSON.stringify({ ...that.addOemForm, ...this.publicForm })
        );
        await API.addOem({ ...that.addOemForm, ...that.publicForm }).then(
          res => {
            if (res.data.code === 0) {
              that.$message("添加成功!", "success");
            } else {
              this.$message({
                type: "warning",
                message: res.data.msg.match(/[\u4e00-\u9fa5]/g).join("")
              });
            }
          }
        );
        that.$refs.addForm.resetFields();
        that.addOemDialig = false;
        that.getOem();
      });
    },

    // 机构的条件查询
    queryOemInfoSubmit() {
      if (this.oemFindQueryForm.createTimeQ === "") {
        delete this.oemFindQueryForm.createTimeQ;
      }
      if (this.oemFindQueryForm.createTimeH === "") {
        delete this.oemFindQueryForm.createTimeH;
      }
      if (this.oemFindQueryForm.enabled === "") {
        delete this.oemFindQueryForm.enabled;
      }
      this.listQueryForm.organCode = this.currentUserInfo.organCode;
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.oemFindQueryForm,
          ...this.oemListPages,
          ...this.listQueryForm,
          ...this.publicForm
        })
      );
      API.getList({
        ...this.oemFindQueryForm,
        ...this.oemListPages,
        ...this.listQueryForm,
        ...this.publicForm
      }).then(res => {
        if (res.data.code === 0) {
          if (res.data.data.records.length !== 0) {
            const Oemdata = res.data.data;
            this.oemtotal = Oemdata.total;
            this.oem_list = Oemdata.records;
            this.oemInfoClick(this.oem_list[this.currentItemIndex]);
            this.isNull = true;
          } else {
            this.oemtotal = 0;
            this.oem_list.length = 0;
            this.isNull = false;
            this.isoeminfo = false;
          }
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
    },
    resetFrom(refName) {
      this.$refs[refName].resetFields();
      this.getOem();
    },

    // 分页
    paginationPrevClick(page) {
      this.oemListPages.pageNum = page;
      this.getOem();
    },
    paginationNextClick(page) {
      this.oemListPages.pageNum = page;
      this.getOem();
    },
    paginationNextChange(page) {
      this.oemListPages.pageNum = page;
      this.getOem();
    },
    handleSizeChange(val) {
      this.authDetailPage.pageSize = val;
      this.getAuthInfo();
    },
    handleCurrentChange(val) {
      this.authDetailPage.pageNum = val;
      this.getAuthInfo();
    },

    // 查询贴牌商列表
    async getOem() {
      this.listQueryForm.organCode = this.currentUserInfo.organCode;
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.oemListPages,
          ...this.listQueryForm,
          ...this.publicForm
        })
      );
      API.getOemList({
        ...this.oemListPages,
        ...this.listQueryForm,
        ...this.publicForm
      }).then(res => {
        if (res.data.code === 0) {
          if (res.data.data.records.length !== 0) {
            const Oemdata = res.data.data;
            this.oemtotal = Oemdata.total;
            this.oem_list = Oemdata.records;
            this.oemInfoClick(this.oem_list[this.currentItemIndex]);
            this.isNull = true;
          } else {
            this.oemtotal = 0;
            this.oem_list.length = 0;
            this.isNull = false;
            this.isoeminfo = false;
          }
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
    },
    tabChange(val) {
      if (val.paneName === "authDetail") {
        this.getAuthInfo();
      }
    },
    // 查询授权日志明细
    async getAuthInfo() {
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      if (this.authDetailPage.createTimeH === "") {
        delete this.authDetailPage.createTimeH;
      }
      if (this.authDetailPage.createTimeQ === "") {
        delete this.authDetailPage.createTimeQ;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({ ...this.authDetailPage, ...this.publicForm })
      );
      API.getAuthDetail({ ...this.authDetailPage, ...this.publicForm }).then(
        res => {
          if (res.data.code === 0) {
            const authDetail = res.data.data;
            this.authDetail = authDetail.records;
            this.authDetailtotal = authDetail.total;
          } else {
            this.$message({
              type: "warning",
              message: res.data.msg
            });
          }
        }
      );
    },

    // 查询贴牌商基础信息
    oemInfoClick(item, index) {
      if (index !== undefined) {
        this.currentItemIndex = index;
      }
      this.oemQueryDetail.organId = item.organId;
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({ ...this.oemQueryDetail, ...this.publicForm })
      );
      API.getListDetail({
        ...this.oemQueryDetail,
        ...this.publicForm
      }).then(res => {
        if (res.data.code === 0) {
          const result = res.data.data;
          this.oeminfo = result;
          this.oeminfo.code = result.organCode.split("_")[1];
          if (result.remark === "") {
            this.oeminfo.remark = "无";
          } else {
            this.oeminfo.remark = result.remark;
          }
          this.oeminfo.createTime = this.$moment(result.createTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          if (!result.enabled) {
            this.oeminfo.enabled = "禁用";
            // 启用/禁用传参使用
            this.oeminfo.organStatus = true;
          } else {
            this.oeminfo.enabled = "启用";
            this.oeminfo.organStatus = false;
          }
          this.activeName = "userInfo";
          this.isoeminfo = true;
          this.oeminfo.organId = item.organId;
          this.oeminfo.id = item.organId;
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
    },

    // 重置密码||禁用解禁
    MessageBoxTemplateFn({ text }, falg) {
      this.$confirm(text, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          this.requestParam.organId = this.oeminfo.organId;
          this.requestParam.currentOrganId = this.currentUserInfo.organId;
          this.requestParam.enabled = Boolean(this.oeminfo.organStatus);
          this.resPwdForm.operatorOrganId = this.currentUserInfo.organId;
          this.resPwdForm.needReloadOrganId = this.oeminfo.organId;
          this.publicForm.timestamp = new Date().getTime();
          if (this.publicForm.sign) {
            delete this.publicForm.sign;
          }
          this.publicForm.sign = createSign(
            JSON.stringify({ ...this.resPwdForm, ...this.publicForm })
          );
          falg === "reset" &&
            (await API.resetPwd({
              ...this.resPwdForm,
              ...this.publicForm
            }).then(res => {
              if (res.data.code === 0) {
                const Base64 = require("js-base64").Base64;
                const newPwd = Base64.decode(res.data.data);
                this.$alert(
                  "重置后的密码为\xa0\xa0" + newPwd,
                  "密码重置成功！",
                  {
                    type: "success",
                    confirmButtonText: "确定",
                    callback: action => {
                      this.$message({
                        type: "success",
                        message: "密码重置成功！"
                      });
                    }
                  }
                );
              } else {
                this.$message({
                  type: "warning",
                  message: res.data.msg
                });
              }
            }));
          if (falg === "ban") {
            if (this.publicForm.sign) {
              delete this.publicForm.sign;
            }
            this.publicForm.sign = createSign(
              JSON.stringify({ ...this.requestParam, ...this.publicForm })
            );
            await API.impowerUser({
              ...this.requestParam,
              ...this.publicForm
            }).then(res => {
              if (res.data.code === 0) {
                this.$message("操作成功!", "success");
              } else {
                this.$message({
                  type: "warning",
                  message: res.data.msg
                });
              }
            });
          }
          this.getOem();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },

    // 添加授权
    promptBox() {
      this.$prompt("请输入要增加的授权数量(电商/计数器)，如 100/100", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator: this.validatorNum
      })
        .then(async ({ value }) => {
          var useValue = value.split('/');
          this.AddAgentNumParam.fromOrganId = this.currentUserInfo.organId;
          this.AddAgentNumParam.toOrganId = this.oeminfo.organId;
          this.AddAgentNumParam.dsCount = Number(useValue[0]) || 0;
          this.AddAgentNumParam.jsCount = Number(useValue[1]) || 0;
          this.publicForm.timestamp = new Date().getTime();
          if (this.publicForm.sign) {
            delete this.publicForm.sign;
          }
          this.publicForm.sign = createSign(
            JSON.stringify({ ...this.AddAgentNumParam, ...this.publicForm })
          );
          await API.addAgentNum({
            ...this.AddAgentNumParam,
            ...this.publicForm
          }).then(res => {
            if (res.data.code === 0) {
              this.$message("增加成功!", "success");
            } else {
              this.$message({
                type: "warning",
                message: res.data.msg
              });
            }
          });
          this.AddAgentNumParam.dsCount = this.AddAgentNumParam.jsCount = null;
          this.getOem();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    validatorNum(val) {
      if (val.split('/')[1] === undefined) return "格式必须为 电商控数/计数器控数";
      // if (!isNumberBig(val)) return "请输入大于0的数";
      return true;
    },
    openEditDialoalog() {
      this.editOemForm.organName = this.oeminfo.organName;
      this.editOemForm.connectorTel = this.oeminfo.connectorTel;
      this.editOemForm.address = this.oeminfo.address;
      this.editOemForm.domain = this.oeminfo.domain;
      this.editOemDialig = true;
    },
    openMessage(flag) {
      switch (flag) {
        case "reset":
          this.MessageBoxTemplateFn({ text: "确认要重置密码嘛？" }, "reset");
          break;
        case "authorize":
          this.promptBox();
          break;
        case "ban":
          this.MessageBoxTemplateFn(
            {
              text:
                this.oeminfo.enabled === "启用"
                  ? "确定禁用此用户"
                  : "确定启用此用户"
            },
            "ban"
          );
          break;
        case "edit":
          this.openEditDialoalog();
          break;
        default:
          break;
      }
    }
  },
  components: {
    ModuleTitle
  }
};
</script>
<style scoped>
* {
  box-sizing: content-box;
}
.current {
  background-color: #1074fd;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}

.list {
  height: 100px;
  padding: 10px 20px 30px 20px !important;
  overflow: hidden;
  margin: 0 !important;
}

.title {
  display: block;
  margin: 5px;
}

.title1 {
  display: block;
  margin: 5px;
  font-size: 12px;
}

.list li {
  display: flex;
  padding: 8px;
  margin-bottom: 5px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.oem_list {
  display: inline-block;
  width: 35%;
  height: 600px;
  margin: 20px 10px 20px 0;
  vertical-align: top;
  border: 1px #bbb solid;
  border-radius: 10px;
  position: relative;

}

.title_list {
  height: 20%;
  margin: 20px;
  background: #bbb;
}

.oem_detail {
  display: inline-block;
  width: 60%;
  height: 600px;
  margin: 20px 0 20px 10px;
  border: 1px #bbb solid;
  border-radius: 10px;
}

.title_detail {
  height: 10%;
  padding: 0 20px;
  margin: 0 0 20px 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #d9d9d9;
  border-bottom: 1px #bbb solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail_mes {
  border-bottom: 1px #e5e5e5 solid;
}

.messages {
  display: inline-block;
  width: 40%;
  margin: 15px;
  color: #666666;
}

.messages1 {
  display: inline-block;
  width: 80%;
  margin: 15px;
  color: #666666;
}

.table_bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}

.table_all {
  display: flex;
  margin-left: 10px;

  span {
    margin-left: 20px;
    font-size: 14px;
    color: #60b5a1;
    cursor: pointer;
  }
}

.form_btn {
  float: right;
  width: 80px;
  margin-left: 15px !important;
  border: 0;
}

/*样式无法修改时  用 /deep/ 或 ::v-deep 操作符取而代之*/
/deep/ .el-tabs__item.is-active {
  color: #1074fd;
}

/deep/ .el-tabs__item:hover {
  color: #1074fd;
  cursor: pointer;
}

/deep/ .el-tabs__active-bar {
  background-color: #1074fd;
}

/deep/ .el-table th {
  overflow: hidden;
  background-color: #d9d9d9;
  color: #888888;
}

/deep/ .el-dialog__header {
  background-color: #d9d9d9;
}

/*头像上传*/
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

/deep/ .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

/deep/ .avatar {
  width: 100px;
  height: 100px;
  display: block;
}

/* 去掉数字输入框的上下箭头 */
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/ input[type="number"] {
  -moz-appearance: textfield;
}
</style>
